<template>
	<view class="release-page page">
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="反映问题"></CustomNav>
		<image src="@/static/image/home/bg.png" class="bg-img"></image>
		<view class="tips-block block" :style="'margin-top:'+mt">
			<view class="iconfont icon-tishi"></view>选择对某个单位进行线索上传，*号为必填项，选择匿名则无需填写举报人及联系方式。
		</view>
		<view class="form-block block">
			<view class="title-item">
				<view class="line"></view>
				<view class="title">反映人信息</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否匿名</view>
				<radio-group @change="radioChange">
					<view class="radio-item">
						<radio value="0" style="transform:scale(0.7);" color="#3153b5" /><text
							style="font-size: 28rpx;margin-right: 40rpx;">实名</text>
						<radio value="1" style="transform:scale(0.7)" color="#3153b5" /><text
							style="font-size: 28rpx;">匿名</text>
					</view>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require" v-if="form.isAnonymous!=1">*</text>举报人姓名</view>
				<input class="form-ctrl" maxlength="6" placeholder-class="input-placeholder" placeholder="请输入举报人姓名"
					v-model="form.name" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require" v-if="form.isAnonymous!=1">*</text>举报人身份证号</view>
				<input class="form-ctrl" maxlength="18" placeholder-class="input-placeholder" placeholder="请输入举报人身份证号"
					type="idcard" v-model="form.idNumber" />
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require" v-if="form.isAnonymous!=1">*</text>联系电话</view>
				<view class="form-content">
					<input class="form-ctrl" maxlength="11" placeholder-class="input-placeholder" placeholder="请输入联系电话"
						v-model="form.phone" type="number" disabled="true" />
					<button class="form-name" hover-class="none" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">点击授权</button>
				</view>
			</view>
		</view>
		<view class="form-block block">
			<view class="title-item">
				<view class="line"></view>
				<view class="title">反映情况</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>被反映单位</view>
				<view style="display: flex;">
					<input class="form-ctrl" maxlength="20" placeholder-class="input-placeholder" placeholder="请选择被反映单位"
						v-model="departmentName" disabled="true" />
					<!-- <view class="iconfont icon-a-gengduo1"></view> -->
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>被反映对象</view>
				<input class="form-ctrl" maxlength="11" placeholder-class="input-placeholder" placeholder="请输入被反映对象"
					v-model="form.reflectedObject"/>
			</view>
			<view class="form-item upload" style="border: none;">
				<view class="form-label"><text class="require">*</text>反映内容</view>
				<view class="form-cotent">
					<textarea class="textarea" placeholder-class="input-placeholder" placeholder="请输入反映内容"
						maxlength="2000" v-model="form.reflectContent"></textarea>
				</view>
			</view>
			<view class="form-item upload">
				<view class="form-label"><text class="require"></text>举证资料（可上传图片、视频）({{evidenceMaterials.length}}/6)</view>
				<view class="tipes-item">
					<view class="iconfont icon-tishi"></view>
					<view class="tips">单张图片不大于5M，视频不大于200M。</view>
				</view>
				<view class="upload-block">
					<view class="item" v-for="(item,index) in evidenceMaterials" :key="index">
						<image v-if="item.type==1" class="photo" :src="cloudStorage+item.url" mode="aspectFill"
							@click="viewImage(item)">
						</image>
						<video v-else-if="item.type==2" :src="cloudStorage+item.url" class="photo"></video>
						<image src="../../static/image/delete.png" @click.stop="deleteImage(index)"
							class="iconfont delete icon-empty"></image>
					</view>
					<view class="upload-btn item" @click="chooseImage">
						<image src="../../static/image/upload.png" v-if="evidenceMaterials.length<6" class="img">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn normal" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		getPhoneApi,
		reflectIssues
	} from '@/api/reflect.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		validate,
		validateIdCard
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				evidenceMaterials: [],
				form: {
					isAnonymous: '',
					name: '',
					idNumber: '',
					phone: '',
					departmentId: '',
					reflectedObject: '',
					reflectContent: '',
					evidenceMaterials: ''
				},
				rule: {
					isAnonymous: {
						name: '是否匿名',
						required: true,
					},
					name: {
						name: '举报人姓名',
						required: true,
					},
					idNumber: {
						name: '举报人身份证号',
						required: true,
					},
					phone: {
						name: '联系电话',
						required: true,
					},
					departmentId: {
						name: '被反映单位',
						required: true,
					},
					reflectedObject: {
						name: '被反映对象',
						required: true,
					},
					reflectContent: {
						name: '反映内容',
						required: true,
					}
				},
				rule1: {
					isAnonymous: {
						name: '是否匿名',
						required: true,
					},
					departmentId: {
						name: '被反映单位',
						required: true,
					},
					reflectedObject: {
						name: '被反映对象',
						required: true,
					},
					reflectContent: {
						name: '反映内容',
						required: true,
					}
				},
				departmentName: ''
			}
		},
		onLoad(e) {
			this.form.departmentId = e.id;
			this.departmentName = e.name;
		},
		methods: {
			radioChange(e) {
				this.form.isAnonymous = e.detail.value
			},
			getPhoneNumber(e) {
				if (!e.detail.code) {
					this.showToast('您取消了授权');
					return;
				}
				const mobileCode = e.detail.code;
				getPhoneApi({
					code: mobileCode
				}).then(res => {
					this.form.phone = res
				})
			},
			submit() {
				let form = JSON.parse(JSON.stringify(this.form));
				if (this.evidenceMaterials.length > 0) {
					let data = this.evidenceMaterials.map(item => {
						return item.url
					})
					form.evidenceMaterials = data.join(',')
				}
				if (form.isAnonymous == 0) {
					if (validate(form, this.rule)) {
						const check = validateIdCard(form.idNumber);
						uni.showLoading({
							title: '提交中',
							mask: true
						})
						reflectIssues(form).then(() => {
							this.showToast('提交成功', () => {
								this.navigate('/pages/index/index')
							})
						})
					}
				} else if (form.isAnonymous == 1) {
					if (validate(form, this.rule1)) {
						const check = validateIdCard(form.idNumber);
						uni.showLoading({
							title: '提交中',
							mask: true
						})
						reflectIssues(form).then(() => {
							this.showToast('提交成功', () => {
								this.navigate('/pages/index/index')
							})
						})
					}
				} else {
					this.showToast('请选择是否匿名')
				}
			},
			deleteImage(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					success: (e) => {
						if (e.confirm) {
							this.evidenceMaterials.splice(index, 1);
						}
					}
				})
			},
			viewImage(url) {
				uni.previewImage({
					current: url,
					urls: [this.cloudStorage + url]
				})
			},
			chooseImage() {
				uni.chooseMedia({
					count: 6 - this.evidenceMaterials.length,
					mediaType: ['image', 'video'],
					sizeType: ['compressed'],
					success: async (res) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						for (let item of res.tempFiles) {
							let url = await uploadFile(item.tempFilePath)
							this.evidenceMaterials.push(url)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.release-page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #F8FBFF;

		.block {
			width: $content-width;
			position: relative;
		}

		.bg-img {
			width: 100%;
			height: 120%;
			position: absolute;
		}

		.tips-block {
			margin: auto;
			border-radius: 14px;
			background: #ffffff;
			display: flex;
			padding: 30rpx 30rpx;
			color: #1559FF;
			font-size: 28rpx;
			line-height: 2;
			position: relative;

			.iconfont {
				margin-right: 10rpx;
				font-size: 34rpx;
			}
		}

		.form-block {
			margin: 30rpx auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 14px;

			.title-item {
				display: flex;
				align-items: center;

				.line {
					width: 14rpx;
					height: 34rpx;
					border-radius: 40rpx;
					background-color: #1559FF;
					margin-right: 15rpx;
				}

				.title {
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.form-item {
				width: 100%;
				padding: 30rpx 0;
				border-bottom: 1px solid #efefef;

				.form-label {
					width: 100%;
					margin-bottom: 20rpx;
					font-size: 30rpx;

					.require {
						color: #ff0000;
					}

					.no-require {
						color: #fff;
					}
				}

				.form-ctrl {
					width: 100%;
				}

				.form-content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.form-ctrl {
						width: calc(100% - 250rpx);
					}

					.form-name {
						font-size: 30rpx;
						background: none;
						margin: 0;
						border-radius: 0;
						line-height: normal;
						padding: 0;
						color: #1559FF;
						margin-left: 20rpx;

						&::after {
							border: none;
						}
					}
				}

				.iconfont {
					width: 40rpx;
					display: flex;
					justify-content: center;
					color: #999;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.form-item:last-child {
				border: none;
			}

			.form-item.upload {
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;

				.form-label {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
				}

				.radio-item {
					display: flex;
					align-items: center;

					.text {
						font-size: 30rpx;
					}
				}

				.form-cotent {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;

					.label-item {
						color: $orange-color;
						border: 1px solid $orange-color;
						border-radius: 6px;
						padding: 6rpx 30rpx;
						font-size: 28rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.textarea {
						width: 100%;
						background: #f5f6f8;
						padding: 30rpx;
						border-radius: 12px;
						min-height: 250rpx;
					}
				}

				.tipes-item {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.iconfont {
						color: #1559FF;
						margin-right: 10rpx;
						font-size: 32rpx;
						margin-left: 0rpx;
					}

					.tips {
						color: #767676;
					}
				}

				.upload-block {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 30rpx;

					.upload-btn {
						// background: #f5f6f8 url('https://www.mashangjiuye.cn/file/91885/20230302173239.png') no-repeat center;
						// background-size: auto 50%;
						background-color: #f1f1f1;
						display: flex;
						align-items: center;
						justify-content: center;

						.img {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.item {
						border-radius: 12rpx;
						width: calc((100% - 40rpx)/3);
						margin-right: 20rpx;
						height: 260rpx;
						margin-bottom: 20rpx;
						position: relative;

						.photo {
							border-radius: 12rpx;
							width: 100%;
							height: 100%;
						}

						// .iconfont {
						// 	position: absolute;
						// 	right: 5px;
						// 	top: 5px;
						// 	color: #fff;
						// 	font-size: 40rpx;
						// 	text-shadow: 0 0 1px #000;
						// }
						.iconfont {
							position: absolute;
							right: 6px;
							top: 4px;
							width: 36rpx;
							height: 36rpx;
						}
					}

					.item:nth-child(2n) {
						margin-right: 0;
					}
				}
			}

			.check-block {
				padding: 30rpx 0;

				.check {
					transform: scale(0.7);
				}

				.check-label {
					font-size: 26rpx;
				}

				.book {
					color: $orange-color;
				}
			}
		}

		.btn {
			width: 400rpx;
			height: 80rpx;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto;
		}

		.btn.normal {
			color: #fff;
			background: #3153b5;
		}

	}
</style>